ExtJS Routing System এর ভূমিকা

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Routing এবং Navigation Management |

ExtJS Routing System হল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরির সময় রাউটিং এবং নেভিগেশন পরিচালনা করতে ব্যবহৃত হয়। রাউটিং সিস্টেমের মাধ্যমে, আপনি URL এর ভিত্তিতে বিভিন্ন ভিউ (views) এবং কম্পোনেন্ট (components) অ্যাক্সেস করতে পারেন, যেমন প্রথাগত ওয়েব অ্যাপ্লিকেশনগুলিতে বিভিন্ন পেজের মধ্যে নেভিগেট করা হয়। ExtJS তে রাউটিং ব্যবহার করে, অ্যাপ্লিকেশনটি ক্লায়েন্ট-সাইডে এক পেজে চলতে থাকে এবং ডেটা বা ভিউ পরিবর্তন হয়, কিন্তু URL ঠিকানা পরিবর্তিত হয়, যা ইউজারের অভিজ্ঞতাকে আরও উন্নত করে।


Routing System কী?

Routing System হল একটি মেকানিজম যা ইউআরএল এর ভিত্তিতে অ্যাপ্লিকেশন ভিউ এবং স্টেট পরিবর্তন করে। এটি ব্যবহারকারীর ইউআরএল চেঞ্জ (যেমন: পেজ পরিবর্তন) ট্র্যাক করে এবং পেজ লোড করার পরিবর্তে উপযুক্ত ভিউ বা কম্পোনেন্ট রেন্ডার করে। ExtJS তে, রাউটিং সিস্টেম অ্যাপ্লিকেশন স্টেট এবং ভিউয়ের মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে সহায়ক।


ExtJS Routing System এর বৈশিষ্ট্য

  1. URL Mapping:
    • রাউটিং সিস্টেম ইউআরএল এর সাথে এক বা একাধিক ভিউ ম্যাপ করতে সক্ষম। এর মাধ্যমে, নির্দিষ্ট ইউআরএল প্যাটার্ন অনুযায়ী উপযুক্ত ভিউ প্রদর্শিত হয়।
  2. History Management:
    • রাউটিং সিস্টেম ব্যবহারকারীর ব্রাউজার হিস্ট্রি ট্র্যাক করে এবং সঠিকভাবে পেছনে বা সামনে নেভিগেট করতে সহায়তা করে।
  3. Dynamic Routing:
    • ইউআরএল চেঞ্জের মাধ্যমে অ্যাপ্লিকেশন ভিউ বা কম্পোনেন্টের ডাইনামিক লোডিং সম্ভব।
  4. URL Parameters:
    • ইউআরএল এ প্যারামিটার ব্যবহার করে ডেটা বা ভিউ কাস্টমাইজ করা যায়। এটি অ্যাপ্লিকেশন ভিউয়ের মধ্যে প্যারামিটার সমর্থন করতে সহায়ক।

ExtJS Routing System এর ব্যবহার

ExtJS তে Routing ব্যবহারের জন্য Ext.util.History এবং Ext.Router (Sencha Cmd এর মাধ্যমে) ব্যবহৃত হয়। এখানে, Ext.util.History কম্পোনেন্ট ব্রাউজারের ইতিহাস এবং Ext.Router রাউটিং সিস্টেমের জন্য ব্যবহৃত হয়।

১. History এবং Routing কনফিগারেশন

Ext.util.History ব্যবহার করে আপনি URL এর ইতিহাস ট্র্যাক এবং ব্রাউজারের 'back' এবং 'forward' অ্যাকশনগুলি ম্যানেজ করতে পারেন।

History ব্যবহারের উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'ExtJS Routing Example',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'button',
            text: 'Go to Page 1',
            handler: function() {
                Ext.util.History.add('page1');
            }
        },
        {
            xtype: 'button',
            text: 'Go to Page 2',
            handler: function() {
                Ext.util.History.add('page2');
            }
        }
    ]
});

// History listener setup
Ext.util.History.on('change', function(token) {
    if (token === 'page1') {
        console.log('Navigated to Page 1');
    } else if (token === 'page2') {
        console.log('Navigated to Page 2');
    }
});

// Enable history
Ext.util.History.init();
  • Ext.util.History.add: এটি নতুন ইউআরএল টোকেন (যেমন: 'page1', 'page2') ব্রাউজারের ইতিহাসে যোগ করে।
  • Ext.util.History.on: ইতিহাসে পরিবর্তন ঘটলে, এটি একটি ইভেন্ট ট্রিগার করে, যেখানে নির্দিষ্ট ভিউ বা কম্পোনেন্ট রেন্ডার করা যেতে পারে।

২. Ext.Router এবং Dynamic Routing

Ext.Router একাধিক রাউটিং প্যাটার্নের জন্য URL এবং কম্পোনেন্ট সংযুক্ত করে।

Ext.Router এর উদাহরণ:

Ext.application({
    name: 'MyApp',

    launch: function() {
        // Define routes
        Ext.Router.on({
            'home': function() {
                console.log('Home Page');
            },
            'user/:id': function(id) {
                console.log('User Page with ID: ' + id);
            }
        });

        // Activate router
        Ext.Router.redirect('home');
    }
});
  • Ext.Router.on: এটি একটি রাউট প্যাটার্ন তৈরি করে, যেমন home এবং user/:id:id একটি প্যারামিটার যা ইউআরএল থেকে পাঠানো হয়।
  • Ext.Router.redirect: এটি একটি নির্দিষ্ট রাউটে নেভিগেট করে, যেমন home

Routing System এর সুবিধা

  1. এক পেজ অ্যাপ্লিকেশন (SPA):
    • রাউটিং সিস্টেম ব্যবহার করে আপনি এক পেজ অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে পুরো অ্যাপ্লিকেশন একটি পেজেই রেন্ডার হয় এবং ডেটা বা ভিউ পরিবর্তন হয়।
  2. ডাইনামিক URL এবং প্যারামিটার:
    • URL এর মাধ্যমে প্যারামিটার পাঠানোর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশ ডাইনামিকভাবে কনফিগার করা যায়, যেমন একটি নির্দিষ্ট ইউজারের ডেটা দেখতে URL এ user/:id প্যারামিটার ব্যবহার করা হয়।
  3. নেভিগেশন এবং ব্রাউজার ইতিহাস:
    • History Management ব্রাউজারের ব্যাক এবং ফরওয়ার্ড বাটন কাজ নিশ্চিত করে, যেখানে ইউজার সহজেই পূর্ববর্তী অবস্থায় ফিরে যেতে পারে।
  4. দ্রুত লোডিং:
    • রাউটিং সিস্টেমের মাধ্যমে আপনি প্রতিটি ইউআরএল টোকেনের জন্য নির্দিষ্ট ভিউ বা কম্পোনেন্ট ডাইনামিকভাবে লোড করতে পারেন, যা অ্যাপ্লিকেশনের লোডিং সময় কমায় এবং পারফরম্যান্স উন্নত করে।

সারাংশ

ExtJS Routing System এর মাধ্যমে আপনি ক্লায়েন্ট-সাইড রাউটিং এবং নেভিগেশন পরিচালনা করতে পারেন। এটি Single Page Applications (SPA) তৈরি করতে সহায়ক এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Ext.util.History এবং Ext.Router টুলস দিয়ে আপনি URL এর মাধ্যমে বিভিন্ন ভিউ এবং কম্পোনেন্ট রেন্ডার করতে পারেন, যা ডেটা বা ইউআরএল চেঞ্জের সাথে সিঙ্ক্রোনাইজেশন নিশ্চিত করে। ExtJS এর রাউটিং সিস্টেম সাশ্রয়ী এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

Content added By
Promotion